<template>
  <div class="main">
    <div class="center">
      <div class="navbar">
        <Header></Header>
        <!-- 虞都私有化部署套餐 -->
        <div class="sysTs">
          <div class="systitle">虞都私有化部署套餐</div>
          <div class="sys_one">
            <img
              src="../../../assets/ConsignmentFourzero/system/xitongtaocan.png"
              alt=""
            />
            <div class="lijizixun" @click="zixunkefu">立即咨询</div>
          </div>
        </div>
        <!-- 虞都互联 -->
        <div class="YuDu">
          <div class="yudu_title">虞都互联开发项目案例赏析</div>
          <div class="yudu_txt">
            游戏交易软件开发领域佼佼者,已服务超9999个项目,为您提供全方位技术支持.
          </div>
        </div>
        <!-- 项目展示 -->
        <div class="xiangmu">
          <div
            class="one"
            v-for="item in image"
            :key="item.id"
            @mouseleave="leaveOut"
            @mousemove="getOne(item)"
          >
            <img :src="item.url" alt="" />
            <div
              class="zhezhao"
              v-if="id && id == item.id"
              :class="{ display: id == item.id ? 'block' : 'none' }"
            >
              <div class="zzbtn" @click="openUrl(item)">我要做个类似的</div>
            </div>
          </div>
        </div>
        <!-- 合作伙伴 -->
        <div class="hzhb">
          <div class="top">
            <!-- 1 -->
            <div class="box">
              <div class="one" v-for="item in list" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
              <!-- <div class="one"></div> -->
            </div>
            <!-- 2 -->
            <div class="box" style="padding-top: 14px">
              <div class="one" v-for="item in list1" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 3 -->
            <div class="box" style="padding-top: 43px">
              <div class="one" v-for="item in list2" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 4 -->
            <div class="box" style="padding-top: 6px">
              <div class="one" v-for="item in list3" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 5 -->
            <div class="box" style="padding-top: 35px">
              <div class="one" v-for="item in list4" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 6 -->
            <div class="box">
              <div class="one" v-for="item in list5" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 7 -->
            <div class="box" style="padding-top: 27px">
              <div class="one" v-for="item in list6" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 8 -->
            <div class="box">
              <div class="one" v-for="item in list7" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 9 -->
            <div class="box" style="padding-top: 35px">
              <div class="one" v-for="item in list8" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 10 -->
            <div class="box" style="padding-top: 6px">
              <div class="one" v-for="item in list9" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 11 -->
            <div class="box" style="padding-top: 43px">
              <div class="one" v-for="item in list10" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 12 -->
            <div class="box" style="padding-top: 14px">
              <div class="one" v-for="item in list11" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
            <!-- 13 -->
            <div class="box">
              <div class="one" v-for="item in list12" :key="item.id">
                <img class="img_hb" :src="item.img" alt="" />
              </div>
            </div>
          </div>
          <!-- 公司logo -->
          <div class="gongsi">
            <div>
              <img
                style="width: 88px; height: 88px"
                src="../../../assets/ConsignmentFourzero/home/logo.png"
                alt=""
              />
            </div>
            <div class="hezuo">合作伙伴</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 联系我们 -->
    <div class="zixun">
      <div class="title">
        联系我们 享<span style="color: #5d87ff">更多优惠</span>
      </div>
      <div class="txt">
        专属技术顾问为您免费提供售前咨询,解决方案推荐等一对一服务
      </div>
      <div class="btn" @click="zixunkefu">立即咨询</div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 联系我们 -->
    <el-dialog
      title="联系我们"
      :visible.sync="centerDialogVisible"
      width="500px"
      center
    >
      <div style="text-align: center; margin-top: 12px">
        <div
          style="
            font-size: 18px;
            padding: 0 0 18px 0;
            width: 300px;
            text-align: left;
          "
        >
          联系手机号：19139006222
        </div>
        <div
          style="
            font-size: 18px;
            padding: 0 0 18px 0;
            width: 300px;
            text-align: left;
          "
        >
          联系微信号：yudu3518
        </div>
        <img
          style="width: 100%; height: 100%"
          src="https://imgage.maimaihao.com/402883e9900b2a6901900b8252f60040.jpg"
          alt=""
        />
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
  
  <script>
import Header from '../../../components/ConsignmentFourzero/header.vue'
import Footer from '../../../components/ConsignmentFourzero/footer.vue'
import { GetPcfnList } from '../../../api/IntroductionPartners/index'
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      image: [
        { name: '飞衡代售', id: 7, url: 'https://imgage.maimaihao.com/牛牛网游备份@2x.png', locat: 'http://feihengdaishou.com' },
        { name: '账号怪', id: 8, url: 'https://imgage.maimaihao.com/编组 11@2x.png', locat: 'http://zhanghaoguai.com' },
        { name: '桃小黑', id: 9, url: 'https://imgage.maimaihao.com/怪兽玩备份 2@2x.png', locat: 'http://txhds.com' },
        { name: '上古', id: 1, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e334bb3578.jpg', locat: 'http://sgwyds.com' },
        // { name: '迈游吧', id: 2, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e37fd93579.jpg', locat: 'http://maiyouba.com' },
        { name: '淘号趣', id: 3, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e3cfcf357a.jpg', locat: 'https://taohaoqu.com' },
        { name: '无名', id: 4, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e415f4357b.jpg', locat: 'https://www.wumingyou.com' },
        { name: '怪兽玩', id: 5, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e454ae357c.jpg', locat: 'https://www.guaishouwan.com' },
        { name: '牛牛', id: 6, url: 'https://img.zhanghaoguai.com/2c95313a8fe7319f018ff6e49740357d.jpg', locat: 'http://yuedong.pc.ikbh.top' },
      ],
      id: null,
      centerDialogVisible: false,
      list: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      list7: [],
      list8: [],
      list9: [],
      list10: [],
      list11: [],
      list12: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getOne(i) {
      console.log('33333', i);
      this.id = i.id
    },
    leaveOut() {
      this.id = null
    },
    openUrl(item) {
      if (item.locat == '') return
      window.open(item.locat)
    },
    zixunkefu() {
      this.centerDialogVisible = true
    },
    async getList() {
      const res = await GetPcfnList({ type: 2 })
      console.log(res);
      this.list = res.rows.slice(0, 2)
      this.list1 = res.rows.slice(2, 4)
      this.list2 = res.rows.slice(4, 6)
      this.list3 = res.rows.slice(6, 9)
      this.list4 = res.rows.slice(9, 12)
      this.list5 = res.rows.slice(12, 16)
      this.list6 = res.rows.slice(16, 19)
      this.list7 = res.rows.slice(19, 23)
      this.list8 = res.rows.slice(23, 26)
      this.list9 = res.rows.slice(26, 29)
      this.list10 = res.rows.slice(29, 31)
      this.list11 = res.rows.slice(31, 33)
      this.list12 = res.rows.slice(33, 35)
    }
  }
}
  </script>
  
  <style lang="scss" scoped>
.main {
  width: 100%;
  background-color: #000;
}
.center {
  .navbar {
    width: 1200px;
    margin: 0 auto;
  }

  .sysTs {
    background-color: #fff;
    height: 1177px;
    .systitle {
      padding-top: 26px;
      width: 288px;
      background: linear-gradient(
        135deg,
        #b620e0 0%,
        #32c5ff 100%
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
      font-weight: 800;
      font-size: 32px;
      color: #fff;
      margin: 0 auto;
    }
    .sys_one {
      padding: 0 88px;
      padding-top: 26px;
      img {
        width: 1024px;
        height: 977px;
      }

      .lijizixun {
        width: 1024px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        background: #5d87ff;
        border-radius: 10px;
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
        margin-top: 20px;
        cursor: pointer;
      }
    }
  }

  .YuDu {
    text-align: center;
    padding: 20px 0;
    .yudu_title {
      font-weight: 800;
      font-size: 32px;
      color: #ffffff;
    }

    .yudu_txt {
      padding-top: 5px;
      font-weight: 800;
      font-size: 20px;
      color: #ffffff;
    }
  }

  .xiangmu {
    display: flex;
    flex-wrap: wrap;
    .one {
      position: relative;
      width: 593px;
      height: 490px;
      margin-right: 14px;
      margin-bottom: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .one:nth-child(2n) {
      margin-right: 0;
    }

    .zhezhao {
      width: 593px;
      height: 490px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      // display: none;
      .zzbtn {
        width: 237px;
        height: 62px;
        text-align: center;
        line-height: 62px;
        background: #5d87ff;
        border-radius: 10px;
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
      }
    }
  }

  .hzhb {
    margin-top: 26px;
    width: 1200px;
    height: 526px;
    background-color: #fff;

    .top {
      display: flex;
      .box {
        width: 80px;
        margin-right: 13.3px;
        .one {
          width: 80px;
          height: 80px;
          background: #d8d8d8;
          border-radius: 10px;
          margin-bottom: 16px;
          .img_hb {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            overflow: hidden;
          }
        }
      }
    }

    .gongsi {
      text-align: center;
      .hezuo {
        font-weight: 800;
        font-size: 32px;
        color: #333333;
        margin-top: -10px;
      }
    }
  }
}

.zixun {
  width: 100%;
  height: 188px;
  background-color: #fff;
  padding: 32px 0;
  text-align: center;

  .title {
    font-weight: 500;
    font-size: 32px;
    color: #333333;
  }

  .txt {
    font-weight: 500;
    font-size: 20px;
    color: #999999;
    padding-top: 21px;
  }

  .btn {
    width: 96px;
    height: 32px;
    line-height: 32px;
    background: #5d87ff;
    border-radius: 4px;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 20px;
  }
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #e2887d, #87aebf);

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
</style>